import React, { useState } from 'react';
import ReactDOM from 'react-dom';

import Editor from '@monaco-editor/react';
import { Button, Space } from 'antd';
import { PlayCircleOutlined, RedoOutlined } from '@ant-design/icons';

const initCode = `// Sample program
import {model} from 'networkminer';

const sourceSites = ['CERN-T0'];
const targetSites = ['NCP-LCG2', 'PIC-T1', 'IHCP Beijing'];

function getOptimalTarget(dataSize: number) {
  const pathSet = model.paths.query({sources: sourceSites, targets: targetSites})
    .filter(path => path.length > 0)
    .map(path => ({
      ...path,
      target: path.hops[path.length],
      time: dataSize / (path.throughput << 20) + path.delay / 1000 // data transfer time (s)
    }))
    .sort((obj1, obj2) => obj1.time > obj2.time);

  if (pathSet.length != 0) {
    return pathSet.first().target;
  }

  return null;
}

function sendData(data) {
  const optimalTarget = getOptimalTarget(data.length << 3); // data size in bits
  if (optimalTarget != null) {
    // send data to optimalTarget
  } else {
    // all targets are not reachable
  }
}
`

export default () => {
  const [code, setCode] = useState(initCode)

  return (
    <Space direction='vertical' style={{ width: '100%' }}>
      <div style={{ float: 'right' }}>
        <Button type='primary' onClick={()=>setCode(initCode)}><RedoOutlined /> Reset</Button>
        <Button type='primary'><PlayCircleOutlined /> Run</Button>
      </div>
      <Editor height="100vh" theme="vs-dark" defaultLanguage="typescript" value={code} onChange={(c) => setCode(c)} />
    </Space>
  )
}